import { size, IFormProps, pageSize } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Button, Input, Table, Popconfirm, Select, message} from 'antd';
import { PaginationProps } from "antd/lib/pagination";
const Styles = require("../../styles/index.less");
import * as api from '../../api/api';
import UserWalletEdit from "../../components/users/UserWalletEdit";
import UserLevelEdit from "../../components/users/UserLevelEdit";
import UserEdit from "../../components/users/UserEdit";
import UserWalletChargeEdit from "../../components/users/UserWalletChargeEdit";

export interface IUsersPros extends IFormProps {
    user: any
}
class Users extends React.PureComponent<IUsersPros, any>{
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
        this.getUsers();
    }

    search = () => {
        this.getUsers({pageIndex:1});
    }

    edit =(user={})=>{
        this.props.dispatch({
            type:"user/save",
             payload:{user}
        });
        this.setVisible(true,2);
    };

    getUsers = (payload?) => {
        payload = Object.assign({}, this.props.user.userSearchs, this.props.form.getFieldsValue(), { ...payload });
        this.props.dispatch({
            type: "user/getUsers",
            payload
        });
    }

    reset = () => {
        this.props.form.resetFields();
    }

    editWallet = (user = {}) => {
        this.props.dispatch({
            type: "user/save",
            payload: { user }
        });
        this.setVisible(true,0);
    }

    editLevel = (user = {}) => {
        this.props.dispatch({
            type: "user/save",
            payload: { user }
        });
        this.setVisible(true,1);
    }

    // editWalletCharge = () => {
    //     this.setVisible(true,3);
    // }

    setActive = (id, isActive) => {
        this.props.dispatch({
            type: "user/setActive",
            payload: {
                form: { id, isActive }
            }
        })
    }

    modifyWallet = (form) => {
        this.props.dispatch({
            type: "user/modifyUserWallet",
            payload: {
                form,
                callback: () => {
                    this.setVisible();
                    this.search();
                    message.info("充值钱包成功");
                }
            }
        });
    }

    addNewUser = (form) => {
        this.props.dispatch({
            type: "user/addNewUser",
            payload: {
                form,
                callback: () => {
                    this.setVisible();
                    this.search();
                    message.info("新增用户成功");
                }
            }
        });

    }

    chargeUsersWallet = (form) => {
        form = Object.assign({}, this.props.form.getFieldsValue(), { ...form });
        this.props.dispatch({
            type: "user/chargeUsersWallet",
            payload: {
                form,
                callback: () => {
                    this.setVisible();
                    this.search();
                    message.info("一键充值钱包成功");
                }
            }
        });
    }

    modifyUserLevel = (form) => {
        this.props.dispatch({
            type: "user/modifyUserLevel",
            payload: {
                form,
                callback: () => {
                    this.setVisible();
                    this.search();
                    message.info("修改用户等级成功");
                }
            }
        });
    }

    remove = (id) => {
        this.props.dispatch({
            type: "user/remove",
            payload: {
                form: { id }
            }
        })
    }

    resetPassword = (id) => {
        this.props.dispatch({
            type: "user/resetPassword",
            payload: {
                form: { id },
                callback: (password) => {
                    message.info('该用户密码已重置为:' + password);
                }
            }
        })
    }

    setVisible = (visible = false, editType = 0) => {
        this.setState({ visible });
        this.setState({ editType });
      };

    view = (id) => {
        this.props.history.push('/user/user?id=' + id);
    }

    onUserLevelChange =(vipLevel)=>{
        let pageIndex =1;
        let payload = Object.assign({},{vipLevel,pageIndex});
        this.getUsers(payload);
    }

    render(): JSX.Element {
        //console.log(this.props);
        const { getFieldDecorator } = this.props.form;
        const { loading } = this.props;
        const { user,
            users: { totalCount, items },
            userSearchs: { pageIndex , pageSize, keywords, vipLevel },
        } = this.props.user;
        const pageChange = (pageIndex, pageSize) => {
            let payload = Object.assign({},
                this.props.user.userSearchs,
                { pageIndex, pageSize });
            this.getUsers(payload);
        }
        const pagination: PaginationProps | boolean = {
            total: totalCount,
            defaultCurrent: 1,
            current: pageIndex,
            pageSize: pageSize,
            showSizeChanger: true,
            showTotal: (total) => `共 ${total} 条`,
            showQuickJumper: true,
            pageSizeOptions: ["10", "20", "30", "50"],
            onShowSizeChange: pageChange,
            onChange: pageChange
        };


        return (
            <Row className={Styles.F_BG_WHITE1}>
                <Row className={Styles.F_BG_WHITE}>
                    <Col span={24}>

                        <Form layout="inline">
                            <Form.Item>
                                {getFieldDecorator("keywords", {
                                    initialValue: keywords
                                })(<Input
                                    style={{ width: 200 }}
                                    size={size}
                                    placeholder="输入用户名/昵称/手机号"
                                />)}
                            </Form.Item>
                            <Form.Item>
                                 <Button size = {size} onClick={this.edit}>新增</Button>
                            </Form.Item>
                            <Form.Item>
                                <Button size={size} type="primary" loading={loading} onClick={this.search}>查询</Button>
                            </Form.Item>
                            {/* <Form.Item>
                                <Button size={size} type="primary" loading={loading} onClick={this.editWalletCharge}>一键钱包充值</Button>
                            </Form.Item> */}
                        </Form>
                        <Col span={24}>
                            <hr className={Styles.hrBorder} />
                            <h3>用户列表 (共 {totalCount} 条)</h3>
                        </Col>
                        <Col span={24}>
                            <Table
                                dataSource={items}
                                bordered
                                pagination={pagination}
                                rowKey={(record: api.SingleUserMallUsersVOUserVO) => String(record.id)}
                                loading={loading}
                            >
                                <Table.Column title="序号" key="no" render={(text, record, index) => {
                                    return (pageIndex - 1) * pageSize + index + 1
                                }} />
                                <Table.Column title="昵称" key="name" dataIndex="name" />
                                <Table.Column title="头像" key="avatar" render={(text, record: api.SingleUserMallUsersVOUserVO, index) => {
                                    return record.avatar && <img width='100px' src={record.avatar} />
                                }} />
                                {/* <Table.Column title="用户名" key="userName" dataIndex="userName" /> */}
                                <Table.Column title="手机号" key="phoneNumber" dataIndex="phoneNumber" />
                                {/* <Table.Column title="个人红包" key="userRedPacket" dataIndex="userRedPacket" /> */}
                                <Table.Column title="佣金" key="commision" dataIndex="commision" />
                                <Table.Column title="体验金" key="points" dataIndex="points" />
                                <Table.Column title="已释放体验金" key="canUsePoints" dataIndex="canUsePoints" />
                                <Table.Column title="状态" key="isActive" render={(text, record: api.SingleUserMallUsersVOUserVO, index) => {
                                    return record.isActive ? "启用" : "禁用"
                                }} />
                                <Table.Column title="操作" render={(text, record: api.SingleUserMallUsersVOUserVO, index) => {
                                    return (
                                        <div>
                                            <a className={Styles.M_RIGHT} onClick={() => this.view(record.id)}>
                                                查看
                                            </a>
                                            <a className={Styles.M_RIGHT} onClick={() => this.resetPassword(record.id)}>
                                                重置密码
                                            </a>
                                            {!record.isActive ? (
                                                <a className={Styles.M_RIGHT} onClick={() => this.setActive(record.id, true)}>
                                                    启用
                                            </a>) : (<a className={Styles.M_RIGHT} onClick={() => this.setActive(record.id, false)}>
                                                    禁用
                                            </a>)}
                                            {/* <a className={Styles.M_RIGHT} onClick={() => this.editWallet(record)}>
                                                钱包充值
                                            </a> */}
                                            <a className={Styles.M_RIGHT} onClick={() => this.editLevel(record)}>
                                                等级修改
                                            </a>
                                            <Popconfirm title="确定删除吗?" onConfirm={() => { this.remove(record.id); }}>
                                                <a>删除</a>
                                            </Popconfirm>
                                        </div>
                                    );
                                }} />
                            </Table>
                        </Col>
                    </Col>
                </Row>

                {
                    this.state.visible && this.state.editType == 0 ? (<UserWalletEdit visible={this.state.visible}
                        user={user}
                        onSave={this.modifyWallet}
                        onCancel={this.setVisible} />)
                        : (undefined)
                }
                {
                    this.state.visible && this.state.editType == 1 ? (<UserLevelEdit visible={this.state.visible}
                        user={user}
                        onSave={this.modifyUserLevel}
                        onCancel={this.setVisible} />)
                        : (undefined)
                }
                {
                    this.state.visible && this.state.editType == 2 ? (<UserEdit visible={this.state.visible}
                        user={user}
                        onSave={this.addNewUser}
                        onCancel={this.setVisible} />)
                        : (undefined)
                }
                                {
                    this.state.visible && this.state.editType == 3 ? (<UserWalletChargeEdit visible={this.state.visible}
                        onSave={this.chargeUsersWallet}
                        onCancel={this.setVisible} />)
                        : (undefined)
                }
            </Row>)
    }
}

export default connect(({ user, loading: { models: { user: loading } } }) => ({ user, loading }))(Form.create()(Users));
